
.back{
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    background: url(https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/yunwen.jpg);
    overflow: hidden;
    font-family: KaiTi ;
  }
  .main-wrap{
    position: absolute;
    height: 65%;
    width: 65%;
    top: 20%;
    left: 18%;
    // z-index: -1;
  }
  footer{
    width: 100%;
    height: 2%;
    position: absolute;
    bottom: 0;
    background: url(https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/langhua.png) repeat-x;
    background-size: contain;
  }
  header{
    width: 100%;
    height: 5.5%;
    position: absolute;
    top: 0;
    background: url(https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/top_border.png) repeat-x;
    background-size: contain;
    z-index: 9;
  }
  .fest{
    width: 23%;
    height: 23%;
    position: absolute;
    left: 43%;
    top: -1.5%;
  }
  .logo{
    width: 6%;
    height: 10%;
    position: absolute;
    left: 38%;
    top: 6%;
  }
  #playButton{
    width: 3%;
    height: 6.1%;
    position: absolute;
    bottom: 5.5%;
    left: 2%;
    z-index: 99;
    animation: jumpBoxHandler 1.8s infinite;
  }
  @keyframes jumpBoxHandler { /* css事件 */
    0% {
      transform: translate(0px, 0px);
    }
    50% {
      transform: translate(0px, 30px); /* 可配置跳动方向 */
    }
    100% {
      transform: translate(0px, 0px);
    }
  }
  .gif{
    width: 18%;
    height: 18%;
    position: absolute;
    right: 30%;
    top: 2%;
  }
  .denglong{
    width:5%;
    height: 23%;
    cursor: pointer;
  }
  .d2{
    position: absolute;
    top: 2.5%;
    right: 5.5%;
  }
  .price {
    display: flex;
    position: absolute;
    bottom: 10%;
    left: 42%;
  }
  .item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Optional: Adjust the height based on your layout */
  margin: 0;
  padding: 0;
}
  
  .footer-item {
    font-size: 1.55rem;
    padding:0.7375rem;
    margin: 0.625rem;
    color: #e00f0f;
    font-weight: bold;
    border: 3px solid #e00f0f;
    border-radius: 50%;
    box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
  }
  
  @media (max-width: 600px) {
    .price {
      flex-direction: column;
    }
  
    .footer-item {
      margin: 0.3125rem 0;
    }
  }
  
  #playButton:hover {
    transform: scale(1.05);
  }
  .menu {
    height: 0;
    background-color: #fff;
    width: 15%;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    
  } 
  @keyframes grow {
    0% {height: 0;}
    100% {height: 100vh;}
  } 
  .menu1 {
    height: 100vh;
    background-color: #fff;
    width: 15%;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 垂直布局子元素 */
    align-items: center; /* 在主轴上居中 */
    // justify-content: center; /* 在交*/
  }
  .d1{
    position: absolute;
    top: 2.5%;
    left: 5.5%;
    z-index: 99;
  }
  @keyframes down {
    0% {top: 2.5%;}
    100% {top: 100vh;}
  }
  .animate{
    animation: grow 0.5s ease-in-out;
  }
  .animate1{
    animation: down 0.5s ease-in-out;
  }
  .menu-item {
    margin-top: 19% ;
    cursor: pointer;
    text-align: center;
    font-size: calc(25vw * 100 / 1920);
    padding: 0.5rem 2rem;
    color: #e00f0f;
    font-weight: bold;
    border: 0.2rem solid #e00f0f;
    border-radius: 1.2rem;
    width: 45%;
    height: auto;
    box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
}
.line{
    height: 0;
    border: #e00f0f solid 0.12rem;
    width: 80%;
    // position: absolute;
    // top: 15%;
    // left: 10%;
}
.fist-prize{
    text-align: center;
    font-size: calc(28vw * 100 / 1920);
    padding: 0.5375rem 2rem;
    color: #e00f0f;
    font-weight: bold;
    margin-top: 5%;
}
.name{
    text-align: center;
    color: #297fb8;
    font-size: 1.15rem;
    font-weight: bold;
}
.name-item{
    margin-bottom: 0.3rem;
}
.line1{
    height: 0;
    border: #e00f0f solid 0.12rem;
    width: 80%;
    margin-top: 0%;
    margin-left: 10%;
}
.second-prize{
    text-align: center;
    font-size: 1.2rem;
    padding: 0.5375rem 2rem;
    color: #e00f0f;
    font-weight: bold;
    margin-top: 0rem;
}
@keyframes up {
    0% {top: 100%;}
    100% {top: 2.5%;}
  }
@keyframes reduce {
    0% {height: 100vh;}
    100% {height: 0;}
} 
.animate2{
    animation: up 0.5s ease-in-out;
  }
.animate3{
    animation: reduce 0.5s ease-in-out;
}
.bubble{
   width: 6%;
   height: 5%;
   position: absolute;
   top: 10%;
   left: 11%;
   z-index: 999;
}
.b1{
  font-size: calc(15vw * 100 / 1920);
    position: absolute;
    font-weight: bold;
    top: 11%;
    left: 11.9%;
    z-index: 1000;
}
.main{
  position: relative;
}
.list{
    position: absolute;
    // background-color: #fff;
    width: 66%;
    height: 60%;
    z-index: 1001;
    top: 52.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.touxiang{
  // margin-left: 2px;
  width: 12rem;
  height: 12rem;
  border: 0.2rem solid #e00f0f;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 1002;
  margin-top: 0%;
  // margin-left: 9rem;
  background: url('https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/facai.jpg') ;
  background-size: cover;
  background-position: center center;
}
.number{
    background-color: #fff;
    opacity: 0.7;
    height: 100%;
    width: 75%;
    margin-left: 2%;
    position: relative;
}
.number img:nth-child(1){
  width: 6%;
  position: absolute;
}
.number img:nth-child(2){
  width: 6%;
  position: absolute;
  right: 0;
}
.number img:nth-child(3){
  width: 6%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.number img:nth-child(4){
  width: 6%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.person{
  text-align: center;
  color: #115b8d;
  font-size: calc(40vw * 100 / 1920);
  font-weight: bold;
  margin: 0.5rem 0.5rem;
}
.number span{
  color: #e00f0f;
  font-size: calc(20vw * 100 / 1920);
  font-weight: bold;
  margin-left: 5%;
}
.warp{
  overflow: hidden;
  height: 100%;
}
.btn {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 10%;
  background-color:alpha($color: #000000);
  font-size: 2.5vh; /* 将字体大小设置为viewport 单位 */
  font-weight: bold;
  text-align: center;
  line-height: 240%;
  color: #e00f0f;
  border: #e00f0f 4px solid;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
}
.lottery-btn{
  background-color: antiquewhite;
}

.disabled {
  /* 样式设置 */
  pointer-events: none;
  opacity: 0.5;
}

.modal {
  /* 弹框样式设置 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn[style="pointer-events:none"] {
  background-color: #95a5a6;
}
.kuang{
  position: relative;
  width:39%;
  height: 150%;
  top: -130%;
  left: 32%;
  background: url('https://fest-1304477611.cos.ap-nanjing.myqcloud.com/nianhui/img/award_1.png') ;
  background-size: cover;
  background-position: center center;
  background-size: 100% 100%; /* 设置背景图片相对容器大小缩放 */
  
}
.block{
  position: absolute;
  top: 31%;
  left:81%;
  transform: translate(-100%, -50%);
  z-index:  1001;
}
.chahao{
  position: absolute;
  width: 5vh;
  top: 7%; /* 设置距离顶部为 0，即在顶部 */
  right: 8%; /* 设置距离右侧为 0，即在右侧 */
  cursor: pointer;
}
.nameperson{
  position: absolute;
  color: #d9ad61; 
  // background-color: #000000;
  // opacity: 0.5;
  width: 63%;
  height: 10%;
  font-size: 3vw;
  font-weight: bolder; 
  display: flex; /* 设置为 Flex 布局 */
  justify-content: center; /* 在主轴上居中（水平居中） */
  align-items: center; /* 在交叉轴上居中（垂直居中） */
  // text-align: center; /* 将文本居中对齐 */
  z-index: 1000;
  bottom: 16%;
  left: 20%;
  transform: translateX(-50%s); /* 通过 translateX 将元素水平居中 */
  /* 不再需要 margin-left 属性 */
}

.t1{
  width: 16vw;
  height: 16vw;
}



